<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="系统管理员"
      sub-title="管理用户"
    />
    <!-- <a-divider style="background-color: rgba(0, 0, 0, 0.5)"></a-divider> -->
    <a-form style="margin-top: 50px">
      <a-table
        :columns="columns"
        :data-source="page.list"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #user_id="{ text }"> ID：{{ text }} </template>

        <template #user_name="{ text }"> 姓名：{{ text }} </template>

        <template #role_id="{ text }"> 角色：{{ text }} </template>

        <template #action="{ record }">
          <span>
            <a @click="deleteUser(record)">删除</a>
            <a-divider type="vertical"/>
            <a @click="openRoleChange(record)">修改角色</a>
          </span>
        </template>
      </a-table>
    </a-form>

    <a-divider style="background-color: rgba(0, 0, 0, 0.5)"></a-divider>
    <a-button style="margin-left: 1200px" @click="openUserAdd"
      >新增用户</a-button
    >
    <a-divider style="background-color: rgba(0, 0, 0, 0.5)"></a-divider>
  </div>

  <a-modal v-model:visible="visible1" title="新增用户" @ok="userAdd">
    <a-form-item
      label="账号"
      has-feedback
      :validateStatus="type1"
      :help="message1"
    >
      <a-input
        v-model:value="new_user.user_id"
        placeholder="请输入账号"
        @change="checkId"
      />
    </a-form-item>

    <a-form-item
      label="名称"
      has-feedback
      :validateStatus="type2"
      :help="message2"
    >
      <a-input
        v-model:value="new_user.user_name"
        placeholder="请输入用户名称"
        @change="checkName"
      />
    </a-form-item>

    <a-form-item
      label="密码"
      has-feedback
      :validate-status="type3"
      :help="message3"
    >
      <a-input-password
        v-model:value="new_user.user_pwd"
        @change="checkPwd"
        placeholder="请输入密码"
      />
    </a-form-item>

      <a-radio-group
        v-model:value="new_user.temp"
        @change="changeTheButton"
      >
        <a-form-item label="账户类型">
          <a-radio :value="1"> 需求用户 </a-radio>
          <a-radio :value="0"> 标注人员 </a-radio>
          <a-radio :value="2"> 审核者 </a-radio>
        </a-form-item>
      </a-radio-group>
  </a-modal>

   <a-modal v-model:visible="visible2" title="更改角色" @ok="changeUserRole">
      <a-radio-group
        v-model:value="changeUser.temp"
        @change="changeTheButton2"
      >
        <a-form-item label="账户类型">
          <a-radio :value="1"> 需求用户 </a-radio>
          <a-radio :value="0"> 标注人员 </a-radio>
          <a-radio :value="2"> 审核者 </a-radio>
        </a-form-item>
      </a-radio-group>
  </a-modal>
</template>
<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import { post, setLocalToken } from "@/common";
import { useRouter } from "vue-router";
// import { route }from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
///////////////////////////////////////////
const page = ref({});

const user = reactive({
  user_id: "",
  user_name: "",
  role_id: "",
});

const deletedUser = reactive({
  user_id:""
})

const changeUser = reactive({
  role_id:"",
  temp:"",
  user_id:""
})

const type1 = ref("");
const message1 = ref("");

const type3 = ref("");
const message3 = ref("");

const type2 = ref("");
const message2 = ref("");

const visible1 = ref(false);

const visible2 = ref(false);

const new_user = reactive({
  user_id: "",
  user_name: "",
  role_id: "",
  user_pwd: "",
  temp: "",
});

const columns = [
  {
    dataIndex: "user_id", //
    title: "用户ID",
    slots: {
      customRender: "user_id",
    },
  },
  {
    dataIndex: "user_name", //
    title: "用户名称",
    slots: {
      customRender: "user_name",
    },
  },
  {
    dataIndex: "role_id", //
    title: "角色ID",
    slots: {
      customRender: "role_id",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

///////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  user.pageNum = pageNum;
  user.pageSize = pagination.pageSize;

  get("/admin/user/getUserInfo", user).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};

getPage(1);

const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

///////////////////////////////////////////
const checkId = () => {
  if (new_user.user_id.length > 0) {
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "账号不为空";
  }
};

const checkName = () => {
  if (new_user.user_name.length > 0) {
    type2.value = "success";
    message2.value = "";
  } else {
    type2.value = "error";
    message2.value = "名称不合法";
  }
};

const checkPwd = () => {
  if (new_user.user_pwd.length >= 6) {
    type3.value = "success";
    message3.value = "";
  } else {
    type3.value = "error";
    message3.value = "密码不少于6位";
  }
};

const changeTheButton = () => {
  if (new_user.temp == 0) {
    new_user.role_id = "respondent";
  } else if (new_user.temp == 1) {
    new_user.role_id = "demander";
  } else if (new_user.temp == 2) {
    new_user.role_id = "checker";
  }
  // message.info(user.role_id)
};

const changeTheButton2 = () =>{
    if (changeUser.temp == 0) {
    changeUser.role_id = "respondent";
  } else if (changeUser.temp == 1) {
    changeUser.role_id = "demander";
  } else if (changeUser.temp == 2) {
    changeUser.role_id = "checker";
  }
}

const userAdd=()=>{
  post('/admin/user/userAdd',new_user).then((res)=>{
    if(res.success){
      message.success(res.message);
      getPage(1);
    }else{
      message.error(res.message);
    }
  })

  visible1.value = false;
};

const deleteUser = (record) =>{
  deletedUser.user_id = record.user_id;
  post('/admin/user/deleteUser',deletedUser).then((res)=>{
    if(res.success){
      message.success(res.message);
      getPage(1);
    }else{
      message.error(res.message);
    }
  })
};

const changeUserRole = () =>{
   post('/admin/user/changeUser',changeUser).then((res)=>{
    if(res.success){
      message.success(res.message);
      visible2.value=false;
      getPage(1);
      
    }else{
      message.error(res.message);
    }
  })
};

const openUserAdd = () => {
  visible1.value = true;
};

const openRoleChange = (record) => {
  changeUser.user_id=record.user_id;
  visible2.value = true;
};
///////////////////////////////////////////
</script>
<style>
</style>